﻿@{
    ViewData["Title"] = "Home Page";
}

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<style>
    #pic {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 20px auto;
        cursor: pointer;
    }</style>
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

<hr />

    <h1>Upload Files-Form</h1>
    <div class="row">
        <section>
            <form method="post" enctype="multipart/form-data" action="http://localhost:5273/Photos">
                <div class="form-group">
                    <div class="col-md-10">
                        <p>Upload one or more files using this form:</p>
                        <input type="file" name="files" multiple />
                    </div>
                </div>
               
                <div class="form-group">
                    <div class="col-md-10">
                        <input type="submit" value="Upload" />
                    </div>
                </div>
            </form>
        </section>
    </div>
    
<hr />
    <h1>UploadFile-JQ</h1>
    <div>
        <img id="pic" src="/images/123.png">
        <input id="upload" name="file" accept="image/*" type="file" style="display: none" />
        <input id="doUpload" type="button" value="确认上传"  />
    </div>
    <script>
        //技术交流qq群：1158377441
         $(function() {
             var file;
             //选图片，预览
                 $("#pic").click(function () {

                     $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                    $("#upload").on("change",function(){
                    var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                  if (objUrl) {
                    $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                    }
                    file=this.files[0];
                });
             });

             //确认上传
             $("#doUpload").click(function(){
                if(file){
                     var data = new FormData();
                     data.append("file", file);
                      $.ajax({
                        type: "post",
                        url: "http://localhost:5273/img-jq",
                     data: data,
                    contentType: false,
            //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
                processData: false,
            // 默认情况下会对发送的数据转化为对象 不需要转化的信息
            success: function (res) {
               alert("上传成功");
            },
        });
                }
             })
        });

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null ;
        if (window.createObjectURL!=undefined) { // basic
             url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
             url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
             url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
        }
    </script>
</div>
